import Script from "next/script";
import Refer from "../Refer";

export const metadata = {
  title: "如何结构化/语义化比较 JSON？",
  keywords: "JSON比较工具,JSON差异对比,JSON文件对比,在线JSON比较,JSON数据比对",
  description: "JSON For You比较功能教程：学习如何快速对比两个JSON数据的差异，高亮显示不同之处，提升开发效率。",
};

# 如何比较 JSON 数据差异？

JSON For You 提供易用的 JSON 比较功能，帮助您快速识别两个 JSON 数据之间的差异，支持高亮展示行内差异、同步滚动、自动文本比较等功能。

<img src="/example/compare.webp" alt="JSON 比较功能" />

## 操作步骤

使用 JSON For You 结构化比较功能，可以按以下步骤操作：

1. 在顶部将右侧视图切换到「文本」视图；
2. 将待比较的 JSON 字符串分别粘贴到左侧编辑器和右侧编辑器中；
3. 点击顶部的「比较」按钮进行结构化比较；

如果没有差异，右下角会弹出提示“不存在差异”。

如果存在差异，右下角会弹出提示“存在差异”，并且会高亮显示差异部分。滚动查看差异时左右两侧编辑器会同步滚动，点击侧边栏的「同步滚动」可以打开或关闭同步滚动功能。

如果不想进行结构化比较，而是想进行文本比较，可以按以下步骤操作：

1. 点击「比较」按钮左侧的开关，切换到「文本比较」模式；
2. 点击「文本比较」按钮；

## JSON 比较的应用场景

- **接口调试**：对比前后端 JSON 响应差异
- **版本控制**：查看 JSON 配置文件的变更历史
- **数据验证**：验证 API 返回数据是否符合预期结构

<Refer />
